<template>
    <!-- 图文导航 -->
    <div class="imgNavContainer" ref="imgNav">
        <v-touch @swipeleft="onSwipeLeft" @swiperight="onSwiperight" :style="{background: imgNavInfo.bgcorlor}">
            <ul 
                :class="['style' + imgNavInfo.layout, 'slide' + imgNavInfo.slide, 'linecount' + imgNavInfo.linecount]"
                ref="warp"
            >
                <li 
                    v-for="item in imgNavInfo.images"
                    :key="item['__image-nav-entry-uuid__']"
                >
                    <!-- <router-link 
                        :to="item.linkUrl"
                        :style="{ color: imgNavInfo.fontcorlor}"
                    > -->
                        <img :src="item.imageUrl" alt="">
                        <div class="txt" :style="{ color: imgNavInfo.fontcorlor}">{{item.linkTitle}}</div>
                    <!-- </router-link> -->
                </li>
                <!-- 回到最左按钮 -->
                <li 
                    class="backLeft" 
                    @click="backLeft" 
                    v-if="imgNavInfo.images.length > 6"
                >
                    <div class="txt" :style="{ color: imgNavInfo.fontcorlor}">回到最左</div>
                </li>
            </ul>
        </v-touch>
    </div>
</template>

<script>
// 引入 滑动工具
import WebUtils from 'Utils/webUtils'

export default {
    props: ['imgNavInfo'],
    data() {
        return {
            translateX: 0  // ul初始x轴位移
        }
    },
    methods: {
        // 向左滑动
        onSwipeLeft() {            
            if (this.imgNavInfo.images.length > 3) {
                WebUtils.touchSlideLeft(this, 0, 100, 'imgNav')
            }
        },
        // 向右滑动
        onSwiperight() {
            if (this.imgNavInfo.images.length > 3) {
                WebUtils.touchSlideRight(this, 100)
            }
        },
        // 回到最左
        backLeft() {
            this.translateX = 0
            this.$refs.warp.style.transform = `translateX(${this.translateX}px)`
        }
    }
}
</script>

<style lang="stylus">
    // 图文导航
    .imgNavContainer
        ul
            display flex
            transition all 0.5s
            li
                flex 1
                display flex
                flex-direction column
                // a
                //     width 100%
                img 
                    width 100%
                .txt 
                    text-align center
                    padding 0.18rem 0.1rem 
        // 滑动
        .slide2
            li
                flex none 
        // 四格
        .linecount4
            li
                width 25%!important
        // 五格
        .linecount5
            li
                width 20%!important    
        // 六格
        .linecount6
            li
                width 16.666%!important    
        // 七格
        .linecount7
            li
                width 14.285%!important   
        // 八格
        .linecount8
            li
                width 12.5%!important
        // 九格
        .linecount9
            li
                width 11.111%!important
        // 十格
        .linecount10
            li
                width 10%!important
        // 样式一
        .style1
            .backLeft
                display none
        // 样式二
        .style2
            img 
                display none!important
            .txt
                position relative
                padding 0.32rem 0.1rem!important
                // &::after
                //     content ""
                //     position absolute
                //     top 50%
                //     left 0
                //     width 200%
                //     height 50%
                //     margin-top -6px
                //     transform scale(.5)
                //     transform-origin 0 0
                //     pointer-events none
                //     box-sizing border-box
                //     border-right 1px solid #eee
</style>
